<template>
    <div id="readme" v-html="readme">
    </div>
</template>
<script>
    import request from "@/lib/request";
    import helper from "@/lib/helper";
    export
        default {
            data() {
                return {
                    isLoading: false,
                    readme: "",
                    repoUrl: ""
                };
            },
            created() {
                let res = location.pathname.match(/[\/](.*)\/(.*)/);
                if (!res) {
                    this.$router.push('/');
                    return;
                }
                this.repoUrl = res[1] + "/" + res[2];
                this.getReadMe();
            },
            methods: {
                getReadMe() {
                    let that = this;
                    request({
                        url: 'repos/' + that.repoUrl + "/readme",
                        success(res) {
                            let readme = helper.base64decode(res.content);
                            request({
                                url: "markdown",
                                method: "POST",
                                data: {
                                    text: readme
                                },
                                success(res) {
                                    that.readme = res.replaceAll("https://images.gitee.com/", "https://gitee_image.hamm.cn/");
                                    that.$nextTick(function () {
                                        let doms = document.querySelectorAll("#readme a");
                                        try {
                                            for (let i in doms) {
                                                doms[i].addEventListener("click", function (e) {
                                                    let url = this.attributes.href.value;
                                                    if (url) {
                                                        window.open(url);
                                                    }
                                                    e.preventDefault();
                                                });
                                            }
                                        } catch (e) {
                                        }
                                    });
                                }
                            });
                        }
                    })
                }
            }
        }
</script>
<style>
    #readme {
        color: #333;
        padding: 40px;
        overflow: hidden;
        overflow-y: auto;
        flex-grow: 1;
        background-color: var(--card-bg-color);
    }

    #readme img {
        max-width: 100%;
    }

    pre {
        background-color: #f5f5f5;
        padding: 10px;
        border-radius: 5px;
    }

    code {
        background-color: #e8e8e8;
        padding: 3px 5px;
        line-height: 20px;
        margin: 0px 8px;
        color: #333;
        border-radius: 5px;
    }

    pre * {
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal;
    }
</style>